Pull request overview

This PR introduces a new "Visual" tab in the workflow admin editor that allows admins to view and edit workflow steps as a swimlane/connector diagram (drag steps between category lanes, drag handles to create/retarget arrows, edit option labels inline, add/delete steps and connectors with confirmation dialogs). It also reorganizes the admin routes/templates from dash-separated nested route names to canonical dotted nested routes, converts several .hbs + JS template-only components to .gjs, and tightens up backend support (deleting a step now also deletes incoming/outgoing WorkflowStepOptions in a transaction, and the steps index endpoint returns related sibling categories for the lane view).

Changes:

• New WorkflowVisualEditor component (~2,500 lines) implementing swimlanes, orthogonal arrow routing with a heavy scoring system, drag-and-drop interactions, and connector option dropdowns; integrated as a tab in WorkflowEditor.
• Admin route/template hierarchy renamed from discourse-workflow-workflows-steps[-options[-edit]] to dotted discourse-workflow-workflows.steps.options.edit form; templates migrated from .hbs to .gjs; tests and the route-source spec updated accordingly.
• Backend: WorkflowStepsController#destroy wrapped in a transaction that removes related step options first; #index now also returns workflow_categories (sibling lane categories); WorkflowStepOptionsController covered by a new update spec.

Reviewed changes

Copilot reviewed 44 out of 50 changed files in this pull request and generated 14 comments.

  async reorderStep(targetStep) {
    const sourceStep = this.workflowSteps.find(
      (step) => step.id === this.draggedStepId
    );

    if (!sourceStep || sourceStep.id === targetStep.id) {
      return;
    }

    const sourcePosition = sourceStep.position;
    await this.updateStep(targetStep, { position: sourcePosition });
    await this.updateStep(sourceStep, { position: targetStep.position });
    await this.reloadGraphInPlace();
  }

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.